<template>
  <div class="show_reasult_containner">
    <div class="swipe-container" style="height: 128px; -webkit-overflow-scrolling: touch">
      <van-swipe
        ref="swipeRef"
        :loop="false"
        :width="98"
        :show-indicators="false"
        :observer="true"
        :observe-parents="true"
      >
        <van-swipe-item
          v-for="(img, index) in images"
          :key="img"
          :class="{ active: activeIndex === index }"
          @click="selectImg(index, img)"
        >
          <img
            :src="img"
            style="width: 90px; height: 120px; object-fit: cover; pointer-events: none"
          />
        </van-swipe-item>
        <!-- 当图片>=3时，末尾添加一个节点，避免滑动后被按钮遮挡 -->
        <van-swipe-item v-if="images.length >= 3"></van-swipe-item>
      </van-swipe>

      <!-- 智能按钮 -->
      <div class="add-button" :style="buttonStyle">
        <div class="button-inner" @click="handleAdd">
          <div class="white-block">
            <div class="top_text">GO</div>
            <img src="@/assets/images/arrow_right.png" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

import image1 from "@/assets/img/stepDetail/pose1.png";
import image2 from "@/assets/img/stepDetail/pose2.png";
import image3 from "@/assets/img/stepDetail/pose3.png";
import image4 from "@/assets/img/stepDetail/pose5.png";
import image5 from "@/assets/img/stepDetail/pose6.png";
import image6 from "@/assets/img/stepDetail/pose7.png";

const images = ref([image1, image2, image3, image4, image5, image6]);
const swipeRef = ref(null);
const activeIndex = ref(0);

const selectImg = (index) => {
  activeIndex.value = index;
};

// 按钮样式计算
const buttonStyle = computed(() => ({
  width: "90px",
  height: "120px",
  left: images.value.length < 3 ? `${images.value.length * 98}px` : "unset",
  right: images.value.length >= 3 ? 0 : "unset",
  zIndex: images.value.length >= 3 ? 10 : 1,
}));

const emit = defineEmits(["goNext"]);
const handleAdd = () => {
  emit("goNext",{});
};
</script>

<style scoped lang="less">
.show_reasult_containner {
  .swipe-container {
    position: relative;
    overflow-x: auto; /* 确保超长内容可滚动 */
  }
  .swipe-container .van-swipe-item {
    box-sizing: border-box;
  }
  // .swipe-container .van-swipe-item.active img {
  //   border: 4px solid #6251ff;
  // }
  .add-button {
    position: absolute;
    top: 0;
    pointer-events: none;
    transition: left 0.3s;
  }
  .button-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #727efa 0%, #6251ff 100%);
    pointer-events: auto;
  }
  .white-block {
    width: 48px;
    height: 48px;
    box-sizing: border-box;
    border-radius: 4px;
    border: 1px solid #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
  }
  .top_text {
    font-size: 16px;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
  }
  .white-block img {
    width: 18px;
    margin: 0 auto;
    margin-top: -6px;
  }
}
</style>
